// 1.下包并引入路由
import VueRouter from "vue-router";
import Vue from "vue";

const Home = () => import("@/pages/Home");
const Login = () => import("@/pages/Login");
const News = () => import("@/pages/Home/News");
const Music = () => import("@/pages/Home/Music");
const Game = () => import("@/pages/Home/Game");
const NotFound = () => import("@/pages/NotFound/404");
const MusicDetail = () => import("@/pages/Home/Music/MusicDetail");
const NewsDetail = () => import("@/pages/Home/News/NewsDetail");
const GameDetail = () => import("@/pages/Home/Game/GameDetail");
// 2.应用路由插件（比如注册一些router提供的全局组件等等...）
Vue.use(VueRouter);

// 3.创建路由器对象，并在内部配置模式和路由表
const router = new VueRouter({
  mode: "history",
  routes: [
    { path: "/", redirect: "/Home" },
    // 每一个对象都是一个路由规则，我们可以给路由规则一个名字，方便后边使用
    {
      path: "/Home",
      component: Home,
      // 如果某个路由拥有了默认子路由，我们一般不会在这个路由规则上命名
      // 二级路由配置
      children: [
        // 二级路由的路径可以直接书写二级路由的路由名称即可，不用书写完整的地址
        // 但是不能写/+当前路由地址
        {
          path: "News",
          component: News,
          name: "News",
          children: [
            {
              path: "NewsDetail",
              component: NewsDetail,
              name: "NewsDetail",
              // 如果props是一个函数，则可以在内部接受到当前路由组件的$route对象
              props: (route) => {
                console.log(route, "route");
                return {
                  ...route.params,
                  ...route.query,
                  classRoom: "0714",
                  count: "71",
                };
              },
            },
          ],
        },
        {
          path: "Music",
          component: Music,
          name: "Music",
          children: [
            // params参数可以设置可选
            {
              path: "MusicDetail/:id/:age?",
              component: MusicDetail,
              name: "MusicDetail",
              props: true,
            },
          ],
        },
        {
          path: "Game",
          component: Game,
          name: "Game",
          children: [
            // params参数可以设置可选
            {
              path: "GameDetail",
              component: GameDetail,
              name: "GameDetail",
              meta: { hidden: true, icon: "plus" },
              props: (route) => {
                return {
                  ...route.meta,
                };
              },
            },
          ],
        },
        // 默认子路由写法1：重定向推荐写法
        { path: "", redirect: "News" },
        // // 默认子路由写法2：直接定向设置组件写法
        // {path:"",component:News}
      ],
    },

    { path: "/Login", component: Login, name: "Login" ,
      // 路由独享守卫
      beforeEnter:(to,from,next)=>{
        console.log(to,from,next);
        console.log("我是login的独享守卫");
        next()
      }
  },
    // 404配置写到最下边
    { path: "/*", component: NotFound },
  ],
});

  // 全局前置守卫
  router.beforeEach((to,from,next)=>{
    // to:要去的路由对象
    // from:来源的路由对象
    // next：是一个函数，必须书写，否则直接停止到当前位置
          // next():直接放行
          // next(false):中断当前导航
          // next(string|location):指定导航地址
          console.log(to,from,next,"全局前置守卫");
          next()
  })

  // // 全局解析守卫
  // 在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用
  // 注释:当我们访问某个路由的时候,当前路由组件被解析,并且组件内守卫也触发了,但是还没有把路由组件交给router-view展示(导航确认之前)
router.beforeResolve((to,from,next)=>{
  console.log(to,from,next,"全局解析守卫");
  next()
})
router.afterEach((to,from)=>{
  console.log(to,from,"afterEach");
})
// 4.暴露router，注入到vue实例中
export default router;
